<template>
  <div class="jihua_third" id="jieshao_third">
    <table v-for="i in week_num">
      <td v-for="(item, index) in info" v-if="item.week==i&&item.day==1" class="first"><p>{{item.week}}周</p></td>
      <td v-for="(item, index) in info" v-if="item.week==i&&item.day==1" @click="get_coursename(item.name,item.id)"
          :class="{select:item.name=='休息',daka:item.daka=='打卡'}"><h1>0{{item.day}}</h1><span>{{item.name}}</span></td>
      <td v-for="(item, index) in info" v-if="item.week==i&&item.day!=1" @click="get_coursename(item.name,item.id)"
          :class="{select:item.name=='休息',daka:item.daka=='打卡'}"><h1>0{{item.day}}</h1><span>{{item.name}}</span></td>
      <td class="buchong" v-for="s in buchong_num" v-if="i==week_num"><h1>01</h1><span></span></td>

    </table>
  </div>


</template>

<script>
  export default {
    name: "Calendar",
    data() {
      return {
        info: "",
        infoa: "",
        week_num: "",
        buchong_num: "",
        richeng:""
      }
    }
    , created() {
      var this_ = this
      this_.$axios.get('http://127.0.0.1:8080/traning/jihua_detail', {
        params: {
          id: this_.$store.state.click_index_planid
        }
      })
        .then(function (response) {
          if (response) {
            this_.richeng = response.data
            if (localStorage.getItem('token')) {

              this_.$axios.get('http://127.0.0.1:8080/traning/check_jihua', {
                params: {
                  jihua_id: this_.$store.state.click_index_planid,
                  id: localStorage.getItem("id"),
                }
              }).then(function (response) {
                if (response.data.code == '1050') {

                  var user_traning_id = response.data.id


                  // 获取打过卡的记录

                  this_.$axios.get('http://127.0.0.1:8080/traning/check_punch_record', {
                    params: {
                      user_traning_id: user_traning_id,
                      id: localStorage.getItem("id"),
                    }
                  }).then(function (response) {
                    var arr = this_.richeng
                    var arr1 = response.data
                    console.log("看这里");
                    console.log(response.data);
                    for (let i = 0; i < arr.length; i++) {
                      for (let j = 0; j < arr1.length; j++) {
                        if (arr[i].id == arr1[j].richeng_id) {
                          arr[i].daka = '打卡'
                        }
                      }
                    }

                    console.log(Math.ceil(arr.length / 7));
                    this_.week_num = Math.ceil(arr.length / 7);
                    this_.buchong_num = 7 - arr.length % 7
                    console.log(this_.week_num);
                    this_.info = arr

                  })


                } else {

                  this_.week_num = Math.ceil(this_.richeng.length / 7);
                  this_.buchong_num = 7 - this_.richeng.length % 7
                  console.log(this_.week_num);
                  this_.info = this_.richeng

                }
              })


            } else {




              this_.week_num = Math.ceil(this_.richeng.length / 7);
              this_.buchong_num = 7 - this_.richeng.length % 7
              console.log(this_.week_num);
              this_.info = this_.richeng
            }
          }
        })




    },

    methods: {
      get_coursename: function (course, richengId) {
        if (course != '休息') {
          this.$store.state.course_name = course
          this.$store.state.richeng_id = richengId
          console.log(course, this.$store.state.richeng_id);
          var this_ = this
          this_.$axios.get('http://127.0.0.1:8080/traning/getcourse_byname', {
            params: {
              course_name: this_.$store.state.course_name
            }
          })
            .then(function (response) {
              this_.$store.state.course_info = response.data
              this_.$store.state.video_info = this_.$store.state.course_info[0]

            })
          this.$router.push('/traningmain');

        } else {
        }
      }

    },


  }
</script>

<style scoped>
  table {
    width: 1000px;
    height: 150px;
    border-collapse: collapse;
    border: none;
    cellspacing: none;
    cellpadding: none
  }

  .first {
    width: 80px;
    border: none;
  }

  .first p {
    position: relative;
    top: 55px;
    font-size: 30px;
    color: rgba(0, 0, 0, 0.7);
  }

  span {
    font-size: 14px;
    position: relative;
    top: 40px;
  }

  table td {
    border: solid 2px rgba(0, 0, 0, 0.07);
    border-bottom: 1px;
    width: 130px;
    height: 150px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0;
  }

  h1 {
    position: relative;
    top: 35px
  }

  td:hover h1 {
    color: white;
  }

  td:hover span {
    color: white;
  }

  td:hover {
    background: rgba(237, 0, 2, 0.68);
  }

  .first:hover {
    background: white;
  }

  a {
    text-decoration: none;
    color: rgba(0, 0, 0, 0.7);
  }

  .buchong h1 {
    opacity: 0;
  }

  .buchong:hover {
    background: white;
    color: white;
  }

  .select {
    background: #D7D7D7;
    opacity: 0.8;
  }

  .select:hover {
    background: #D7D7D7;
    opacity: 1;

  }

  .daka {
    background: #409EFF;
    opacity: 0.8;
  }

  .daka:hover {
    background: #409EFF;
    color: black;
    opacity: 1;
  }

  .daka:hover span {
    color: black;
  }

  .daka:hover h1 {
    color: black;
  }

  .select:hover h1 {
    color: black;
  }

  .select:hover span {
    color: black;
  }

  td {
    cursor: pointer;
  }

  .first {
    cursor: default;
  }
</style>
